<template>
  <div class="head">
    <div class="dhx_toolbar_btnbase dhx_toolbar_btn"
         v-show="indexOfShowArray('makeCert')"
         title="add"
         onmouseover="this.className='dhx_toolbar_btnbase dhx_toolbar_over'"
         onmouseout="this.className='dhx_toolbar_btnbase dhx_toolbar_btn'"
         @click="makeCertClicked">
      <img src="/static/images/addBtn.jpg" class="span_image">
      <div class="dhx_toolbar_txt">{{otherI18n.post}}</div>
    </div>
    <div class="dhx_toolbar_btnbase dhx_toolbar_btn"
         v-show="indexOfShowArray('add')"
         title="add"
         onmouseover="this.className='dhx_toolbar_btnbase dhx_toolbar_over'"
         onmouseout="this.className='dhx_toolbar_btnbase dhx_toolbar_btn'"
         @click="addClicked">
      <img src="/static/images/addBtn.jpg" class="span_image">
      <div class="dhx_toolbar_txt">{{otherI18n.add}}</div>
    </div>
    <div class="dhx_toolbar_btnbase dhx_toolbar_btn"
         v-show="indexOfShowArray('update')"
         onmouseover="this.className='dhx_toolbar_btnbase dhx_toolbar_over'"
         onmouseout="this.className='dhx_toolbar_btnbase dhx_toolbar_btn'"
         @click="updateClicked">
      <img src="/static/images/save.gif" class="span_image">
      <div class="dhx_toolbar_txt">{{otherI18n.update}}</div>
    </div>
    <div class="dhx_toolbar_btnbase dhx_toolbar_btn"
         v-show="indexOfShowArray('save')"
         onmouseover="this.className='dhx_toolbar_btnbase dhx_toolbar_over'"
         onmouseout="this.className='dhx_toolbar_btnbase dhx_toolbar_btn'"
         @click="saveClicked">
      <img src="/static/images/save.gif" class="span_image">
      <div class="dhx_toolbar_txt">{{saveTitle}}</div>
    </div>
    <div class="dhx_toolbar_btnbase dhx_toolbar_btn"
         v-show="indexOfShowArray('hide')"
         onmouseover="this.className='dhx_toolbar_btnbase dhx_toolbar_over'"
         onmouseout="this.className='dhx_toolbar_btnbase dhx_toolbar_btn'"
         @click="cancelClicked">
      <img src="/static/images/delBtn2.jpg" class="span_image">
      <div class="dhx_toolbar_txt">{{otherI18n.hide}}</div>
    </div>
    <div class="dhx_toolbar_btnbase dhx_toolbar_btn"
         v-show="showDelete()"
         onmouseover="this.className='dhx_toolbar_btnbase dhx_toolbar_over'"
         onmouseout="this.className='dhx_toolbar_btnbase dhx_toolbar_btn'"
         @click="deleteClicked">
      <img src="/static/images/delBtn2.jpg" class="span_image">
      <div class="dhx_toolbar_txt">{{otherI18n.delete}}</div>
    </div>
    <div class="dhx_toolbar_text" title="">{{note}}</div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: 'bpmCGridbar',
  data () {
    return {
      collapse: false
    }
  },
  props: {
    gridStatus: '',
    showArray: {
      type: Array,
      default () {
        return ['makeCert', 'add', 'update', 'delete', 'save']
      }
    },
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    param: '',
    isCollapse: {
      type: Boolean,
      default: false
    },
    note: {
      type: String,
      default: ''
    },
    checkedList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    ...mapState(['otherI18n']),
    saveTitle () {
      if (this.gridStatus === 'update') { return this.otherI18n.modify } else { return this.otherI18n.save }
    }
  },
  watch: {
    checkedList (v) {
      console.log('check bar changed:::::::', v, v.length)
      // this.$emit('gridCheckedChanged', v)
    }
  },
  methods: {
    pclick () {
      this.isCollapse = !this.isCollapse
      this.$emit('click', this.param)
    },
    makeCertClicked () {
      this.$emit('makeCertClicked')
    },
    addClicked () {
      this.$emit('addClicked')
    },
    updateClicked () {
      this.$emit('updateClicked')
    },
    deleteClicked () {
      this.$emit('deleteClicked')
    },
    saveClicked () {
      this.$emit('saveClicked')
    },
    cancelClicked () {
      this.$emit('cancelClicked')
    },
    indexOfShowArray (aStr) {
      for (let i in this.showArray) {
        if (this.showArray[i] === aStr) {
          return true
        }
      }
      return false
    },
    showDelete () {
      let deleteRight = this.indexOfShowArray('delete')
      if (deleteRight) {
        return deleteRight
      }
      let delsel = this.indexOfShowArray('delsel')
      if (!delsel) {
        return delsel
      }
      return this.checkedList.length > 0 ? true: false
    }
  }
}
</script>

<style scoped>
  .head {
    float: left;
    background-image: url(/static/images/dhxtoolbar_imgs.gif);
    background-position: 0px -27px;
    background-repeat: repeat-x;
    direction: ltr;
    width: 100%;
    display: block;
    height: 27px;
  }

  .dhx_toolbar_btnbase {
    cursor: default;
    display: block;
    float: left;
    height: 18px;
    margin: 2px 1px 0px 2px;
    padding: 3px 3px 2px 3px;
    position: relative;
    width: 60px;
  }

  .dhx_toolbar_btn {
  }

  .dhx_toolbar_over {
    background-image: url(/static/images/dhxtoolbar_imgs.gif);
    background-repeat: repeat-x;
    background-position: 0 -54px;
  }

  .dhx_toolbar_txt {
    margin: 2px 2px 0 2px;
    float: right;
    font-size: 11px;
    line-height: normal;
    height: 16px;
    cursor: default;
  }

  .dhx_toolbar_text {
    float: left;
    vertical-align: middle;
    font-size: 11px;
    margin-top: 5px;
    margin-right: 1px;
    padding: 0 4px;
    color: #0000ff;
  }

  .span_image {
    width: 18px;
    height: 18px;
  }
</style>
